<template>
  <div class="app-container main-c">
    <search-form :fields="searchFormConifg" @submit="onSearchSubmit" />
    <div class="mt20 ml20" style="display: flex">
      <el-card class="mr20">
        <span>总订单数(笔)：</span>
        <span>10000</span>
      </el-card>
      <el-card class="mr20">
        <span>付款金额(元)：</span>
        <span>10000</span>
      </el-card>
      <el-card class="mr20">
        <span>退款订单数(笔)：</span>
        <span>10000</span>
      </el-card>
      <el-card class="mr20">
        <span>退款金额(元)：</span>
        <span>10000</span>
      </el-card>
      <el-button type="primary" size="mini" icon="el-icon-download" @click="exportCouponList">导出</el-button>
    </div>
    <el-divider />
    <!-- 配置列 -->
    <div style="width: calc(100% - 18px)">
      <enhanced-table
        :key="1"
        :table-data="tableData"
        :table-configs.sync="tableConfigs"
        :col-configs.sync="columnConfigs"
        @handleButton="handleButton"
        @pageChange="pageChange"
        @selectionChange="selectionChange"
      >
        <el-table-column slot="img" width="120px" label="图片">
          <el-popover placement="right-start" width="526" trigger="hover">
            <!-- <img slot="reference" src="../images/u55.png" style="width: 68x;height:59px;">
            <img src="../images/u55.png" style="width: 500px;"> -->
          </el-popover>
        </el-table-column>
      </enhanced-table>
    </div>
  </div>
</template>
<script>
import TableHandler from '@/layout/mixin/TableHandler'
import SearchForm from '@/components/SearchForm'
import EnhancedTable from '@/components/EnhancedTable'
import { getOrderList } from '@/api/order'
export default {
  components: {
    SearchForm,
    EnhancedTable
  },
  mixins: [TableHandler],
  data() {
    return {
      exportQueryData: {},
      orderStateMap: {
        1: '已付款',
        0: '未付款',
        2: '部分付款'
      },
      tableData: [],
      queryData: {}, // 查询数据
      currentOrderId: 0, // 当前选中订单Id
      tableConfigs: {
        // index: true,
        // listLoading: true,
        // selection: true,
        selectedColumn: [],
        page: {
          pageSize: 20,
          currentPage: 1,
          total: 2,
          selection: true
        }
      },
      editForm: {},
      // 表格列数据
      columnConfigs: [
        {
          prop: 'orderId',
          label: '订单号',
          minWidth: 200
        },
        {
          prop: 'orderAmount',
          label: '淘宝订单号',
          minWidth: 100
        },
        {
          prop: 'issuedAmount',
          label: '店铺',
          minWidth: 100
        },
        {
          prop: 'serveAmount',
          label: '商品链接',
          minWidth: 100
        },
        {
          prop: 'orderStateText',
          label: '状态',
          minWidth: 100
        },
        {
          prop: 'orderStateText',
          label: '拍下金额',
          minWidth: 100
        },
        {
          prop: 'orderStateText',
          label: '点击时间',
          minWidth: 100
        },
        {
          prop: 'gmtCreated',
          label: '订单创建时间',
          minWidth: 150
        },
        {
          prop: 'orderStateText',
          label: '付款时间',
          minWidth: 100
        },
        {
          prop: 'orderStateText',
          label: '主账户',
          minWidth: 100
        },
        {
          prop: 'orderStateText',
          label: '子账户',
          minWidth: 100
        }
        // {
        //   label: '操作',
        //   width: 100,
        //   options: [
        //     {
        //       label: '详情',
        //       type: 'text',
        //       methods: 'detail'
        //     },
        //     {
        //       label: '删除',
        //       type: 'text',
        //       methods: 'delete'
        //     }
        //   ]
        // }
      ],
      // 搜索配置
      searchFormConifg: [
        [
          {
            label: '主账户:',
            type: 'input',
            field: 'orderId',
            placeholder: '请输入'
          },
          {
            label: '状态:',
            type: 'select',
            options: [
              {
                label: '全部',
                value: ''
              },
              {
                label: '待付款',
                value: '1'
              },
              {
                label: '已付款',
                value: '0'
              },
              {
                label: '部分付款',
                value: '2'
              }
            ],
            value: '',
            field: 'orderState',
            placeholder: '请选择'
          },
          {
            type: 'date',
            label: '创建时间:',
            field: 'gmtCreated',
            value: [],
            placeholder: '请选择'
          }
        ]
      ]
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    async getOrderList(params) {
      const { currentPage = 1, pageSize = 20 } = this.tableConfigs.page
      params = {
        limit: pageSize,
        page: params ? 1 : currentPage,
        ...params
      }
      const {
        data: { rows, total }
      } = await getOrderList(params)
      rows.forEach((item) => {
        item.orderStateText = this.orderStateMap[item.orderState]
        item.serveAmount = (+item.serveAmount).toLocaleString()
        item.issuedAmount = (+item.issuedAmount).toLocaleString()
        item.orderAmount = (+item.orderAmount).toLocaleString()
      })
      this.tableData = rows
      this.tableConfigs.page.total = +total
    },
    exportCouponList() {
      window.open(`${process.env.VUE_APP_BASE_API}/sys/goodsExchangeCertificate/exportList`)
    },
    // 选中
    selectionChange({ rows }) {
      this.selectOrder = rows
    },
    handleButton({ methods, row }) {
      switch (methods) {
        case 'detail':

          break
        case 'delete':

          break
        default:
          break
      }
    },
    /**
     * 搜索查询
     */
    async onSearchSubmit(params) {
      if (params) {
        // 处理数据
        // 如果需要筛选时间
        if (params.queryByDate) {
          this.queryData.queryStartDate = params.queryByDate[0]
          this.queryData.queryEndDate = params.queryByDate[1]
          delete params.queryByDate
        }
        delete params.selectInput
        this.queryData = { ...params, ...this.queryData }
        await this.getOrderList(this.queryData)
        this.exportQueryData = this.queryData
        this.queryData = {}
      } else {
        this.queryData = {}
        await this.getOrderList(this.queryData)
      }
    },
    pageChange(params) {
      this.tableConfigs.page = params
      this.getOrderList()
    }
  }
}
</script>
<style lang="scss">

</style>
